<template>
    <div class="add-card">
        <header class="add-header">
            <el-page-header :content="this.id ? '编辑月卡' : '增加月卡'" @back="$router.back()" />
        </header>
        <main class="add-main">
            <div class="form-container">
                <div class="title">车辆信息</div>
                <div class="form">
                    <el-form label-width="100px" :rules="carInfoRules" :model="carInfoForm" ref="carInfoForm">
                        <el-form-item label="车主姓名" prop="personName">
                            <el-input v-model="carInfoForm.personName" />
                        </el-form-item>
                        <el-form-item label="联系方式" prop="phoneNumber">
                            <el-input v-model="carInfoForm.phoneNumber" />
                        </el-form-item>
                        <el-form-item label="车辆号码" prop="carNumber">
                            <el-input v-model="carInfoForm.carNumber" />
                        </el-form-item>
                        <el-form-item label="车辆品牌" prop="carBrand">
                            <el-input v-model="carInfoForm.carBrand" />
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="form-container">
                <div class="title">最新一次月卡缴费信息</div>
                <div class="form">
                    <el-form label-width="100px" ref="feeInfoForm" :model="feeInfoForm" :rules="feeInfoRules">
                        <el-form-item label="有效日期" prop="payTime">
                            <el-date-picker v-model="feeInfoForm.payTime" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" />
                        </el-form-item>
                        <el-form-item label="支付金额" prop="paymentAmount">
                            <el-input v-model="feeInfoForm.paymentAmount" />
                        </el-form-item>
                        <el-form-item label="支付方式" prop="paymentMethod">
                            <el-select v-model="feeInfoForm.paymentMethod">
                                <el-option v-for="item in payMethodList" :key="item.id" :value="item.id"
                                    :label="item.name" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

        </main>
        <footer class="add-footer">
            <div class="btn-container">
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="confirmAdd">{{ this.id ? '编辑' : '确定' }}</el-button>
            </div>
        </footer>
    </div>
</template>

<script>
import { addCardAPI, getCardDetailAPI,editCardAPI } from '@/api/card';
export default {
    data() {
        return {
            //车辆信息表单
            carInfoForm: {
                personName: '',
                phoneNumber: '',
                carNumber: '',
                carBrand: '',
            },
            //缴费表单
            feeInfoForm: {
                payTime: [],
                paymentAmount: null, // 支付金额
                paymentMethod: '' // 支付方式
            },
            //车辆信息校验规则
            carInfoRules: {
                personName: [
                    { required: true, message: '请输入车主姓名', trigger: 'blur' }
                ],
                phoneNumber: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                carNumber: [
                    { required: true, message: '请输入车辆号码', trigger: 'blur' },
                    //自定义校验
                    { validator: this.validatorCarNumber, trigger: 'blur' }
                ],
                carBrand: [
                    { required: true, message: '请输入车辆品牌', trigger: 'blur' }
                ]
            },
            //缴费表单校验规则
            feeInfoRules: {
                payTime: [
                    {
                        required: true,
                        message: '请选择支付时间'
                    }
                ],
                paymentAmount: [
                    {
                        required: true,
                        message: '请输入支付金额',
                        trigger: 'blur'
                    }
                ],
                paymentMethod: [
                    {
                        required: true,
                        message: '请选择支付方式',
                        trigger: 'change'
                    }
                ]
            },
            //支付方式列表
            payMethodList: [
                {
                    id: 'Alipay',
                    name: '支付宝'
                },
                {
                    id: 'WeChat',
                    name: '微信'
                },
                {
                    id: 'Cash',
                    name: '线下'
                }
            ]
        }
    },
    computed: {
        id() {
            return this.$route.query.id
        }
    },
    created() {
        if (this.id) {
            this.getCardDetail();
        }

    },
    methods: {
        // rule value callback
        // rule: 用不到
        // value：用户输入的数据
        // callback：不管校验成功还是失败都要调用
        validatorCarNumber(rule, value, callback) {
            const plateNumberRegex = /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/;
            if (plateNumberRegex.test(value)) {
                callback()
            } else {
                callback(new Error('车牌号格式不正确'))
            }
        },
        //兜底校验，并发送请求
        confirmAdd() {
            this.$refs.carInfoForm.validate((flag) => {
                if (!flag) return;
                this.$refs.feeInfoForm.validate(async (flag) => {
                    if (!flag) return;
                    const requestData = {
                        ...this.carInfoForm,
                        ...this.feeInfoForm,
                        cardStartDate: this.feeInfoForm.payTime[0],
                        cardEndDate: this.feeInfoForm.payTime[1],
                    }
                    delete requestData.payTime
                    if (this.id) {
                        //编辑接口
                        editCardAPI(requestData);
                        this.$message.success('月卡修改成功')
                    } else {
                        //添加接口
                        await addCardAPI(requestData);
                        this.$message.success('月卡添加成功')
                    }

                    this.$router.back()
                })
            })
        },
        // 重置按钮
        resetForm() {
            //resetFields 只能清空加了prop表单域的内容
            this.$refs.carInfoForm.resetFields();
            this.$refs.feeInfoForm.resetFields();
        },
        // 回显数据
        async getCardDetail() {
            const { data } = await getCardDetailAPI(this.id);
            const { personName, phoneNumber, carNumber, carBrand,carInfoId } = data;
            this.carInfoForm = { personName, phoneNumber, carNumber, carBrand,carInfoId };
            const { cardStartDate, cardEndDate, paymentAmount, paymentMethod,rechargeId } = data;
            this.feeInfoForm = { payTime: [cardStartDate, cardEndDate], paymentAmount, paymentMethod,rechargeId };
        }
    }
}
</script>

<style scoped lang="scss">
.add-card {
    background-color: #f4f6f8;
    height: 100vh;

    .add-header {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 64px;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .add-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
            background-color: #fff;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }

        .preview {
            img {
                width: 100px;
            }
        }
    }

    .add-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 24px 50px;
        color: #000000d9;
        font-size: 14px;
        background: #fff;
        text-align: center;
    }
}
</style>